<template>

  <el-drawer
    :title="title"
    :visible.sync="dialogShow"
    :before-close="onClose"
    size="50%"
    direction="rtl"
    custom-class="demo-drawer"
  >
    <hr>
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-row :gutter="15" class="drawer">
        <el-form ref="form" class="elform" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24" />
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属小区" prop="community_code">
              <el-select
                v-model="formData.community_code"
                placeholder="请选择所属小区"
                clearable
                size="small"
                :style="{ width: '100%' }"
                @change="getBuildChange"
              >
                <el-option
                  v-for="item in community_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属栋数" prop="building_code">
              <el-select
                v-model="formData.building_code"
                placeholder="请选择所属栋数"
                :style="{width: '100%'}"
                @change="getHouseChange"
              >
                <el-option
                  v-for="item in build_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属房产" prop="house_code">
              <el-select
                v-model="formData.house_code"
                placeholder="请选择所属房产"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="item in house_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="成员姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入成员姓名" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="身份证号">
              <el-input
                v-model="formData.identity_id"
                placeholder="请输入身份证号"
                :style="{width: '100%'}"
                clearable
                @change="getBirth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="出生日期">
              <el-input
                :value="formData.birth"
                placeholder="请输入"
                :disabled="true"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="联系方式">
              <el-input v-model="formData.tel" type="number" placeholder="请输入联系方式" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="职业">
              <el-input v-model="formData.occupation" placeholder="请输入职业" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="性别" prop="gender" class="gender">
              <el-radio-group v-model="formData.gender" size="medium">
                <el-radio
                  v-for="(item, index) in genderOptions"
                  :key="index"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成员类型" prop="owner_type" class="gender">
              <el-radio-group v-model="formData.owner_type" size="medium">
                <el-radio
                  v-for="(item, index) in owner_typeOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成员照片">
              <uploadImg
                ref="uploadUmage"
                :seeimage2="seeimage1"
                @pushImage="pushImage"
                @removeUrl="removeUrl"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="备注">
              <el-input v-model="formData.remark" placeholder="请输入" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24" class="">
            <el-form-item size="large">
              <el-button @click="onClose">取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
          </el-col> -->

        </el-form>
      </el-row>
    </div>
    <hr>
    <div class="demo-drawer__footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { communityInfo, communityBuild, buildHouse, addOwner, editOwner } from '@/api/owers/owers'

export default {
  name: 'BuildForm',
  components: {

  },
  props: {
    seeimage1: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      imgList: [], // 图片回显
      dialogShow: false,

      formData: {
        birth: '',
        building_code: '',
        community_code: '',
        gender: 1,
        house_code: '',
        identity_id: '',
        name: '',
        occupation: '',
        owner_type: 1,
        remark: '',
        photo: '',
        tel: ''
      },
      rules: {
        community_code: [{ required: true, message: '所属小区编号不可为空且检查类型', trigger: 'blur' }],
        building_code: [{ required: true, message: '所属栋数编号不可为空且检查类型', trigger: 'blur' }],
        name: [{ required: true, message: '姓名不可为空且检查类型', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择', trigger: 'blur' }],
        owner_type: [{ required: true, message: '请选择', trigger: 'blur' }],
        house_code: [{ required: true, message: '房产编号不可为空且检查类型', trigger: 'blur' }]
      },
      community_codeOptions: [],
      build_codeOptions: [],
      house_codeOptions: [],
      genderOptions: [{
        'label': '男',
        'value': 1
      }, {
        'label': '女',
        'value': 0
      }],
      owner_typeOptions: [{
        'label': '业主',
        'value': 1
      }, {
        'label': '家庭成员',
        'value': 2
      }, {
        'label': '租客',
        'value': 3
      }]
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改人员信息' : '新增人员信息'
    }
  },
  watch: {},
  mounted() {
    console.log(this.community_codeOptions)
  },
  created() {
    this.communityInfo()
  },

  methods: {
    // 处理生日
    getBirth(value) {
      // console.log('getBirth', value)
      const arr = []
      arr.push(this.formData.identity_id.substring(6, 10))
      arr.push(this.formData.identity_id.substring(10, 12))
      arr.push(this.formData.identity_id.substring(12, 14))
      this.formData.birth = arr.join('-')
    },
    // 获取小区
    async communityInfo() {
      const res = await communityInfo()
      // console.log(res)
      this.community_codeOptions = res.data.data
    },
    // 选择框改变获取小区对应楼栋
    async getBuild(val) {
      console.log('触发getBuild', val)
      const res = await communityBuild(val)
      // console.log(res)
      this.build_codeOptions = res.data.data
      // console.log('getBuild', this.build_codeOptions)
    },
    async getBuildChange(val) {
      this.$set(this.formData, 'building_code', '')
      this.$set(this.formData, 'house_code', '')
      this.house_codeOptions = []
      this.getBuild(val)
    },
    // 选择框改变获取小区对应楼栋对应房产
    async getHouse(val) {
      console.log(val, '楼栋')
      const res = await buildHouse(val)
      this.house_codeOptions = res.data.data
    },
    async getHouseChange(val) {
      this.$set(this.formData, 'house_code', '')
      this.getHouse(val)
    },

    submitForm() {
      this.$refs['form'].validate(async valid => {
        console.log(this.imgList)
        if (!valid) return
        // TODO 提交表单
        this.formData.photo = this.imgList.join(',')

        try {
          if (this.formData.id) {
            // 修改
            await editOwner(this.formData)
            console.log('修改成功')
            this.$message.success('修改成功')
          } else {
            // 新增
            const res = await addOwner(this.formData)
            console.log(res)
            if (res.data.success) {
              this.$message.success('添加成功')
            } else {
              return this.$message.error('请求错误，请检查身份证信息是否填写')
            }
          }
          // 关闭弹框，通知父组件刷新数据
          // 关闭弹框
          this.onClose()
          // 列表更新
          this.$emit('updateList')
        } catch (err) {
          this.$message.error(this.formData.id ? '修改失败' : '添加失败')
        }
      })
    },
    removeUrl(url) {
      console.log(url)
      this.imgList = this.imgList.filter(item => url !== item)
    },
    pushImage(url) {
      this.imgList.push(url)
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        birth: '',
        building_code: '',
        community_code: '',
        gender: 1,
        house_code: '',
        identity_id: '',
        name: '',
        occupation: '',
        owner_type: 1,
        remark: '',
        photo: '',
        tel: ''
      }
      // 移除校验
      this.$refs.form.clearValidate()
      this.imgList = []
      this.$refs.uploadUmage.fileList = []
      // 关闭弹框
      this.dialogShow = false
      // 通知父组件清数据
      this.$parent.seeImage = []
    }
  }
}

</script>
<style lang='scss'>
.elform{
  padding: 20px;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}

.demo-drawer__content {
  height: 550px;
  overflow: scroll;
  overflow-x:hidden
}

.demo-drawer__footer{
  // position: fixed;
  // bottom: 0;
  // left: 0;
  float: right;
  margin-right: 30px;
}
.el-form-item__label{
  font-weight: normal;
  float: none;
}
.el-form-item__content{
  margin-left: 0 !important;
}
</style>
